<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>Title</title>
        <%
            String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
            /*
             * request.getScheme() : http
             * request.getServerName() : localhost
             * request.getServerPort() : 端口号
             * request.getContextPath() : /获取虚拟目录名(项目名jsp_framework)
             * */
        %>
        <base href="<%=basePath%>">
        <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>


        <%--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~前后端-通信~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--%>
        <h2>~~~~~~~~~~~~~~~~~~~~~~~~前后端-通信~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</h2>
        <h5>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[异步通信]~~~~~~~~~~~~~~~~~~~~</h5>
        <h6>-----------------------------ajax----------------------------|</h6>
        <h6>(1)获取用户名:</h6>
        <script>
            $(function () {//当页面加载完成后自动执行
                $.get("communication/getUsername", {}, function (data) {
                    if (data.flag) {
                        var user = data.data;
                        $("#userName").text(user.username);
                    }
                });
            });
        </script>
        <h5>用户名(<em id="userName"></em>)</h5>


        <h6>(2)获取分类数据:</h6>
        <script>
            $(function () {
                $("#getCategoryBtn").click(function () {
                    $.get("communication/getCategory", {}, function (data) {
                        if (data.flag) {
                            var categorys = data.data;
                            var dd = '';
                            for (let i = 0; i < categorys.length; i++) {
                                dd += '<dd>' + categorys[i].cname + '</dd>';

                                $("#dl").html(dd);
                            }
                        }
                    });
                });
            });
        </script>
        <dl id="dl">
            <dd>空</dd>
        </dl>
        <input type="button" value="获取分类数据" id="getCategoryBtn">


        <h6>-----------------------------img----------------------------|</h6>
        <h6>(1)验证码:</h6>
        <img src="checkCodeServlet" id="checkCodeImg"/><br>
        <script>
            $("#checkCodeImg").click(function () {
                this.src = "checkCodeServlet?time=" + new Date().getTime();
            });
        </script>
        <br><br><br><br><br><br>


        <h5>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[同步通信]~~~~~~~~~~~~~~~~~~</h5>
        <h6>-----------------------------form----------------------------|</h6>
        <h6>(1)模拟注册:(同步: 你会发现整个页面都跳转到了regist1)</h6>
        <form action="communication/regist1" method="post" id="form">
            <table>
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="text" name="password"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="同步注册"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="button" value="异步注册" id="btnRegist"></td>
                </tr>
            </table>
        </form>
        <script>
            $(function () {
                $("#btnRegist").click(function () {
                    alert("异步提交表单了");
                    $.post("communication/regist1",$("#form").serialize(),function (data) {
                        alert(data);
                    })
                    return false;//不提交表单
                })
            });
        </script>


        <h6>-----------------------------a----------------------------|</h6>
        <h6>(1)录入玩家信息页:</h6>
        <a href="enterPlayInfo.jsp">录入玩家信息页</a><br>


        <h6>-----------------------------浏览器栏url----------------------------|</h6>
        <h6>(1)从服务器获取用户信息展示页面:</h6>
        <script>
            function jump() {
                location.href = "showPlayInfo.jsp";
            }
        </script>
        <input type="button" value="用户信息展示页面" onclick="jump()"/><br><br><br><br><br><br>














        <%--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~服务器内-通信~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<--%>
        <h2>~~~~~~~~~~~~~~~~~~~~~~~~~~服务器内-通信~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</h2>

        <h5>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[四大域 jsp特有通信方式]~~~~~~~~~</h5>
        <h6>-----------------------------pageContext----------------------------|</h6>
        <h6>(1)pageContext范围:(只有当前jsp页面有效)</h6>
        <%
            pageContext.setAttribute("pageContextKey", "pageContext测试数据");
        %>
        <span>${pageScope.pageContextKey}</span><br>


        <h6>-----------------------------request (从请求转发中获取的数据) ----------------------------|</h6>
        <h6>(1)request范围:(同一个请求有效)</h6>
        <%
            request.setAttribute("requestKey", "req测试数据");
        %>
        <span>${requestScope.requestKey}</span><br>

        <h6>(2)来自服务器Servlet</h6>
        <span>${requestScope.reqServlet}</span>



        <h6>-----------------------------session----------------------------|</h6>
        <h6>(1)session范围:(只要浏览器不关闭 , 当前web项目中 , 所有servlet共享)</h6>
        <%
            session.setAttribute("requestKey", "session测试数据");
        %>
        <span>${sessionScope.requestKey}</span><br>

        <h6>(2)来自服务器Servlet</h6>
        <span>${sessionScope.sessionServlet}</span>



        <h6>-----------------------------application----------------------------|</h6>
        <h6>(1)application范围:(只要服务器不关闭 , 当前web项目中 , 所有servlet共享)</h6>
        <%
            application.setAttribute("applicationKey", "application测试数据");
        %>
        <sapn>${applicationScope.applicationKey}</sapn>
        <br>

        <h6>(2)来自服务器Servlet</h6>
        <span>${applicationScope.applicationServlet}</span><br><br>


        <form action="communication/fieldTest" method="post">
            <input type="submit" value="加载域数据" >
        </form>




        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </body>
</html>































